<script setup lang="ts">
import {defineEmits, ref } from 'vue';

const emit = defineEmits(['logout']);

// 模拟水电费数据
const utilityBills = ref([
  { month: '2024-03', water: 45.5, electricity: 78.2, paid: false },
  { month: '2024-02', water: 42.8, electricity: 65.5, paid: true },
  { month: '2024-01', water: 38.6, electricity: 72.3, paid: true },
]);

// 模拟AI对话
const chatMessages = ref([]);
const userInput = ref('');

const handlePayment = (month: string) => {
  const bill = utilityBills.value.find(b => b.month === month);
  if (bill) {
    bill.paid = true;
  }
};

const sendMessage = () => {
  if (!userInput.value.trim()) return;

  chatMessages.value.push({
    type: 'user',
    content: userInput.value
  });

  // 模拟AI回复
  setTimeout(() => {
    chatMessages.value.push({
      type: 'ai',
      content: '您好！这是AI助手的回复。我可以帮您解答关于水电费用的问题。'
    });
  }, 1000);

  userInput.value = '';
};
</script>

<template>
  <div class="dashboard">
    <a-layout>
      <a-layout-header class="header">
        <div class="logo">宿舍水电管理系统 - 用户端</div>
        <a-button type="link" @click="$emit('logout')">退出登录</a-button>
      </a-layout-header>
      <a-layout-content class="content">
        <a-row :gutter="16">
          <a-col :span="16">
            <a-card title="水电费账单">
              <a-table :dataSource="utilityBills" :columns="[
                { title: '月份', dataIndex: 'month', key: 'month' },
                { title: '水费(元)', dataIndex: 'water', key: 'water' },
                { title: '电费(元)', dataIndex: 'electricity', key: 'electricity' },
                { title: '状态', key: 'status',
                  customRender: ({ record }) => record.paid ? '已缴费' : '未缴费'
                },
                { title: '操作', key: 'action',
                  customRender: ({ record }) => !record.paid &&
                    <a-button type="primary" size="small" onClick={() => handlePayment(record.month)}>
              缴费
              </a-button>
              }
              ]" />
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card title="AI助手">
              <div class="chat-container">
                <div class="chat-messages">
                  <div v-for="(msg, index) in chatMessages" :key="index"
                       :class="['message', msg.type]">
                    {{ msg.content }}
                  </div>
                </div>
                <div class="chat-input">
                  <a-input
                    v-model:value="userInput"
                    placeholder="请输入您的问题"
                    @pressEnter="sendMessage"
                  >
                    <template #suffix>
                      <a-button type="primary" @click="sendMessage">发送</a-button>
                    </template>
                  </a-input>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<style scoped>
.dashboard {
    width: 100%;
    min-height: 100vh;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    background: #fff;
}

.logo {
    color: #000;
    font-size: 18px;
    font-weight: bold;
}

.content {
    padding: 24px;
    background: #f0f2f5;
}

.chat-container {
    height: 400px;
    display: flex;
    flex-direction: column;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    margin-bottom: 10px;
}

.message {
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 4px;
}

.message.user {
    background: #e6f7ff;
    margin-left: 20%;
}

.message.ai {
    background: #f5f5f5;
    margin-right: 20%;
}

.chat-input {
    padding: 10px 0;
}
</style>